<template>
  <view class="content">
    <!-- 顶部图标+标题 居中区域 -->
    <view class="header">
      <image class="logo" src="/static/logo.png"></image>
      <text class="title">{{ title }}</text>
    </view>

    <view>{{ number + 1 }}</view>
    <view>{{ ok ? 'YES' : 'NO' }}</view>
    <view>{{ message.split('').reverse().join('') }}</view>

    <button type="primary" @click="handleClick">点击我</button>
    <view>点击次数: {{ clickCount }}</view>

    <view v-if="isShow">显示内容</view>
    <view v-else>隐藏内容</view>

    <view v-for="(item, index) in arr" :key="index" style="color: #ff0000;">
      {{ item }}
    </view>

    <view v-for="(value, name, index) in object" :key="index">
      <view style="color: #0000ff;">{{ index }}. {{ name }}: {{ value }}</view>
    </view>

    <view v-for="item in objArr" :key="item.id">
      <view style="color: #00ff00;">{{ item.id }}: {{ item.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      number: 1,
      ok: true,
      message: 'uni-app',
      clickCount: 0,
      isShow: true,
      arr: ['HTML', 'CSS', 'JavaScript', 'Vue'],
      object: { name: 'uni-app', type: '跨平台框架', version: '3.0' },
      objArr: [
        { id: 1, name: 'HTML' },
        { id: 2, name: 'Vue' },
        { id: 3, name: 'uni-app' },
        { id: 4, name: 'Android' }
      ]
    };
  },
  methods: {
    handleClick() {
      this.clickCount++;
    }
  }
};
</script>

<style>
.content {
  padding: 20px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中 */
  margin-bottom: 20rpx;
}
.logo {
  width: 120rpx;
  height: 120rpx;
  margin-right: 10rpx; /* 图标与文字间距 */
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}
</style>